<template>
  <div>
 <div><br>
  <div><i class="el-icon-arrow-right" style="color: red;font-size: 15px"></i><span style="font-size: 15px"><b>请选择食物分类</b></span></div><br>
   <div v-for="(item,index) in menus" :key="index"  class="clas" >
       <router-link  :to="{path:'/details',query:{foodtype:item.type}}" style="text-decoration: none">
       <div style="height: 100px;cursor:pointer;">
         <el-image :src='item.photo' style="width: 150px;height: 110px;border-radius: 5px;  box-shadow: 0px 0px 6px #888888;">
           <div slot="error" class="image-slot">
             <i class="el-icon-picture-outline"></i>
           </div>
         </el-image>
         <div class="type1"><h>{{item.name}}</h></div>
         <div class="type3"><h>更多的...</h></div>
       </div>
       <el-divider></el-divider>
       <br>
       </router-link>
   </div>
 </div>

  </div>
</template>

<script>

export default {
  name: "classify",
  data(){
    return {
      menus: [
        {
          photo:require('@/assets/food1.png'),
          name:"谷薯芋、杂豆、主食",
          type:1,
        }, {
          photo:require('@/assets/food2.png'),
          name:"蛋类、肉类及制品",
          type:2,
        },{
          photo:require('@/assets/food3.png'),
          name:"奶类及制品",
          type:3,
        },{
          photo:require('@/assets/food4.png'),
          name:"蔬果和菌藻",
          type:4,
        },{
          photo:require('@/assets/food5.png'),
          name:"坚果、大豆及制品",
          type:5,
        },{
          photo:require('@/assets/food6.png'),
          name:"饮料",
          type:6,
        },{
          photo:require('@/assets/food7.png'),
          name:"食用油、油脂及制品",
          type:7,
        },{
          photo:require('@/assets/food8.png'),
          name:"调味品",
          type:8,
        },{
          photo:require('@/assets/food9.png'),
          name:"零食、点心、冷饮",
          type:9,
        },{
          photo:require('@/assets/food10.png'),
          name:"其他",
          type:10,
        }
      ],
    }
  },

}
</script>

<style scoped>
.clas{
  width: 250px;
  margin-top: 20px;
  margin-right: 10px;
  margin-left: 20px;
  float: left;
}
.type1{
  position: relative;
  top:-120px;
  left: 160px;
  width: 100px;
  color: rgb(63,115,222);
  font-weight: bolder;
  font-size: 15px;
}
.type3{
  position: relative;
  top:-80px;
  left: 160px;
  color: rgb(63,115,222);
  font-size: 10px;
}

</style>
